<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/layout :: head('逾期借阅管理')}"></head>
<body>
    <!-- 导航栏 -->
    <nav th:replace="~{fragments/layout :: navbar}"></nav>
    
    <!-- 页面内容 -->
    <div th:replace="~{fragments/layout :: content(~{::main})}">
        <main>
            <h2 class="mb-4">逾期借阅管理</h2>
            
            <!-- 逾期统计 -->
            <div class="row mb-4">
                <div class="col-md-4">
                    <div class="card text-white bg-danger">
                        <div class="card-body">
                            <h5 class="card-title">逾期总数</h5>
                            <p class="card-text display-4" th:text="${overdueCount}">0</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card text-white bg-warning">
                        <div class="card-body">
                            <h5 class="card-title">即将到期（3天内）</h5>
                            <p class="card-text display-4" th:text="${dueSoonCount}">0</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card text-white bg-dark">
                        <div class="card-body">
                            <h5 class="card-title">长期逾期（超过30天）</h5>
                            <p class="card-text display-4" th:text="${longOverdueCount}">0</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 筛选表单 -->
            <div class="card mb-4">
                <div class="card-body">
                    <form th:action="@{/loans/admin/overdue}" method="get" class="row g-3">
                        <div class="col-md-4">
                            <label for="username" class="form-label">用户名</label>
                            <input type="text" class="form-control" id="username" name="username" th:value="${param.username}">
                        </div>
                        <div class="col-md-4">
                            <label for="days" class="form-label">逾期天数</label>
                            <select class="form-select" id="days" name="days">
                                <option value="">所有逾期</option>
                                <option value="7" th:selected="${param.days != null && param.days[0] == '7'}">超过7天</option>
                                <option value="14" th:selected="${param.days != null && param.days[0] == '14'}">超过14天</option>
                                <option value="30" th:selected="${param.days != null && param.days[0] == '30'}">超过30天</option>
                            </select>
                        </div>
                        <div class="col-md-4 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="fas fa-filter me-1"></i> 筛选
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- 逾期借阅列表 -->
            <div class="card">
                <div class="card-body">
                    <div th:if="${#lists.isEmpty(overdueLoans)}" class="text-center py-5">
                        <p class="text-muted">没有找到符合条件的逾期借阅记录</p>
                    </div>
                    
                    <div class="table-responsive" th:unless="${#lists.isEmpty(overdueLoans)}">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>用户</th>
                                    <th>图书</th>
                                    <th>借阅日期</th>
                                    <th>应还日期</th>
                                    <th>逾期天数</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:each="loan : ${overdueLoans}" th:classappend="${loan.daysOverdue > 30 ? 'table-danger' : (loan.daysOverdue > 14 ? 'table-warning' : '')}">
                                    <td th:text="${loan.id}">1</td>
                                    <td>
                                        <a th:href="@{/admin/users/{id}(id=${loan.user.id})}" class="text-decoration-none">
                                            <span th:text="${loan.user.name}">用户名</span>
                                            <small class="text-muted d-block" th:text="${loan.user.username}">用户名</small>
                                        </a>
                                    </td>
                                    <td>
                                        <a th:href="@{/books/view/{id}(id=${loan.book.id})}" class="text-decoration-none">
                                            <span th:text="${loan.book.title}">图书标题</span>
                                            <small class="text-muted d-block" th:text="${loan.book.author}">作者</small>
                                        </a>
                                    </td>
                                    <td th:text="${#temporals.format(loan.borrowDate, 'yyyy-MM-dd')}">2023-01-01</td>
                                    <td th:text="${#temporals.format(loan.dueDate, 'yyyy-MM-dd')}">2023-01-15</td>
                                    <td>
                                        <span class="badge bg-danger" th:text="${loan.daysOverdue} + ' 天'">10 天</span>
                                    </td>
                                    <td>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-sm btn-success me-1" data-bs-toggle="modal" th:data-bs-target="'#returnModal-' + ${loan.id}">
                                                标记为已归还
                                            </button>
                                            <button type="button" class="btn btn-sm btn-info" data-bs-toggle="modal" th:data-bs-target="'#notifyModal-' + ${loan.id}">
                                                发送提醒
                                            </button>
                                            
                                            <!-- 归还确认模态框 -->
                                            <div class="modal fade" th:id="'returnModal-' + ${loan.id}" tabindex="-1" aria-labelledby="returnModalLabel" aria-hidden="true">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title">确认归还</h5>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <p>确认图书 <strong th:text="${loan.book.title}">图书标题</strong> 已归还?</p>
                                                            <div class="alert alert-warning">
                                                                <i class="fas fa-exclamation-triangle me-2"></i>
                                                                此借阅已逗期 <strong th:text="${loan.daysOverdue} + ' 天'">10</strong>
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <form th:action="@{/loans/admin/return}" method="post">
                                                                <input type="hidden" name="loanId" th:value="${loan.id}">
                                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                                                <button type="submit" class="btn btn-success">确认归还</button>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <!-- 提醒模态框 -->
                                        <div class="modal fade" th:id="'notifyModal-' + ${loan.id}" tabindex="-1" aria-labelledby="notifyModalLabel" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="notifyModalLabel">发送逾期提醒</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <form th:action="@{/loans/admin/notify}" method="post">
                                                        <div class="modal-body">
                                                            <input type="hidden" name="loanId" th:value="${loan.id}">
                                                            <div class="mb-3">
                                                                <label for="notifyMethod" class="form-label">提醒方式</label>
                                                                <select class="form-select" id="notifyMethod" name="notifyMethod" required>
                                                                    <option value="EMAIL">电子邮件</option>
                                                                    <option value="SMS">短信</option>
                                                                </select>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="message" class="form-label">附加消息</label>
                                                                <textarea class="form-control" id="message" name="message" rows="3" placeholder="请尽快归还逾期图书..."></textarea>
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                                            <button type="submit" class="btn btn-primary">发送提醒</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- 分页 -->
                    <nav th:if="${totalPages > 1}" class="mt-3">
                        <ul class="pagination justify-content-center">
                            <li class="page-item" th:classappend="${currentPage == 0} ? 'disabled' : ''">
                                <a class="page-link" th:href="@{/loans/admin/overdue(page=${currentPage - 1}, username=${param.username}, days=${param.days})}" aria-label="上一页">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li class="page-item" th:each="i : ${#numbers.sequence(0, totalPages - 1)}" 
                                th:classappend="${currentPage == i} ? 'active' : ''">
                                <a class="page-link" th:href="@{/loans/admin/overdue(page=${i}, username=${param.username}, days=${param.days})}" th:text="${i + 1}">1</a>
                            </li>
                            <li class="page-item" th:classappend="${currentPage == totalPages - 1} ? 'disabled' : ''">
                                <a class="page-link" th:href="@{/loans/admin/overdue(page=${currentPage + 1}, username=${param.username}, days=${param.days})}" aria-label="下一页">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </main>
    </div>
    
    <!-- 页脚 -->
    <footer th:replace="~{fragments/layout :: footer}"></footer>
    
    <!-- 脚本 -->
    <div th:replace="~{fragments/layout :: scripts}"></div>
</body>
</html>
